<!DOCTYPE html>

<html >
    <head>
        <meta charset="UTF-8">
        <title>class selector</title>

        <style type="text/css">
            /* 选择页面上那些 class 属性中包含了 wrapper 的元素 */
            .wrapper {
                border: 1px solid blue ;
                overflow: hidden ;
            }
            .left {
                float: left ;
                width : 80% ;
                background-color: #dedede;
            }
            .right {
                float : right ;
                width: 20% ;
                background-color: #FFFF00;
            }

            .first { height: 10px ; }
        </style>

    </head>
    <body>

        <div class="wrapper">
            <div class="left">
                <input type="text" name="wd" >
            </div>
            <div class="right">
                <input type="submit" value="百度一下">
            </div>
        </div>

        <div class="first"></div>

        <div class="wrapper">
            <span class="left">
                <input type="text" name="q" >
            </span>
            <span class="right">
                <input type="submit" value="360搜索">
            </span>
        </div>

    </body>
</html>